import { homeOrderChartStastic } from '@/services/stastica';
import { Column } from '@ant-design/plots';
import { StatisticCard } from '@ant-design/pro-components';
import { useMount, useRequest } from 'ahooks';
import { theme } from 'antd';
import React from 'react';

const { Statistic } = StatisticCard;

const OrderTotalStastica: React.FC = () => {
  const { token } = theme.useToken();
  /*  const  data=[
    {
      "letter": "1月",
      "frequency": 0.08167
    },
    {
      "letter": "2月",
      "frequency": 0.01492
    },
    {
      "letter": "3月",
      "frequency": 0.02782
    },
    {
      "letter": "4月",
      "frequency": 0.04253
    },
    {
      "letter": "5月",
      "frequency": 0.12702
    },
    {
      "letter": "6月",
      "frequency": 0.02288
    },
    {
      "letter": "7月",
      "frequency": 0.02015
    },
    {
      "letter": "8月",
      "frequency": 0.06094
    },
    {
      "letter": "9月",
      "frequency": 0.06966
    },
    {
      "letter": "10月",
      "frequency": 0.00153
    },
    {
      "letter": "11月",
      "frequency": 0.00772
    },
    {
      "letter": "12月",
      "frequency": 0.04025
    }

  ]*/

  // @ts-ignore

  const { data, run } = useRequest(homeOrderChartStastic, { manual: true });

  function getConfigData(data: unknown) {
    return {
      data: data,
      height: 285,
      xField: 'date',
      yField: 'price',
      meta: {
        date: {
          alias: '月份',
        },
        price: {
          alias: '金额',
        },
        type: {
          alias: '类型',
        },
      },
    };
  }
  useMount(() => {
    run();
  });

  return (
    <StatisticCard
      gutter={24}
      title="订单总览"
      bordered={true}
      chart={
        <>
          <Column {...getConfigData(data)} />
        </>
      }
    />
  );
};
export default OrderTotalStastica;
